<template>
  <div class="contact">
    <a-spin tip="模型加载中请稍等..." :spinning="spin">
      <div class="header">
        <div class="header-logo">
          <img style="margin-right: 10px" src="../../assets/icon/icon-11.png" />
          <h1 style="font-size: 24px; font-family: FZZhengHeiS-M-GB; font-weight: 400">中粮灌溉管理系统</h1>
        </div>
        <div class="nav">
          <ul>
            <li>
              <a class="active" href="#">灌溉一张图</a>
            </li>
            <li>
              <!-- <a href="#">数据采集</a> -->
              <router-link to="/wfinfo/real/RealTimeData">数据采集</router-link>
            </li>
            <li>
              <router-link to="/wfinfo/monitoring/dataMonitoring">远程监控</router-link>
            </li>
            <li>
              <router-link to="/wfinfo/valveControl/valueList">阀门控制</router-link>
            </li>
            <li>
              <router-link to="/wfinfo/irrigation/IrrigationGroup">灌溉管理</router-link>
            </li>
            <li>
              <router-link to="/wfinfo/websitePressure/pressure">管网压力</router-link>
            </li>
            <li>
              <router-link to="/wfinfo/WaterAndFertilizer/management">水费管理</router-link>
            </li>
            <li>
              <router-link to="/wfinfo/chargeManagement/charge">收费管理</router-link>
            </li>
            <li>
              <router-link to="/wfinfo/management/statistics">设备管理</router-link>
            </li>
          </ul>
        </div>
        <div class="layouts">
          <a-icon type="user" style="margin-right: 5px; font-size: 16px" />
          <a-dropdown>
            <a style="color: #fff; font-weight: 400" class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              管理员
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item @click="handleLogout">
                <a href="javascript:;">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </div>
      <div class="rotation" @click="irrigationBtn">
        <p>轮灌组</p>
        <img src="../../assets/img/water.png" />
      </div>
      <div class="monitor" @click="monitoring">
        <p>远程监控</p>
        <img src="../../assets/icon/icon-17.png" />
      </div>
      <div class="police" :class="{ className: callThePoliceList.length != 0 }" @click="monitorStatus = true">
        <img src="../../assets/img/bj.png" />
      </div>
      <div class="police-box" v-show="monitorStatus">
        <div class="police-top">
          <div class="top-tips">
            <div style="position: absolute; top: -50px; left: 24px">异常监控</div>
          </div>
          <a-icon class="colse" type="close" @click="monitorStatus = false" />
        </div>
        <div>
          <a-tabs>
            <a-tab-pane key="1" tab="异常">
              <a-empty v-show="callThePoliceList == ''" />
              <div style="width: 100%; height: 245px; overflow: auto">
                <a-row style="padding: 0 18px">
                  <a-col
                    @click="$router.push('/wfinfo/monitoring/dataMonitoring')"
                    :span="24"
                    v-for="(item, index) in callThePoliceList"
                    :key="index"
                    style="height: 43px; line-height: 43px; border-bottom: 1px solid #d2d2d4"
                  >
                    <a-col :span="12">{{ item.deviceName }}</a-col>
                    <a-col :span="12">{{ item.createDate }}</a-col>
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <!--          <a-button icon="clock-circle" slot="tabBarExtraContent" type="link">历史记录</a-button>-->
          </a-tabs>
        </div>
      </div>
      <div class="irrigation-box" v-show="irrigationStatus">
        <div class="police-top">
          <div class="top-tips">
            <div style="position: absolute; top: -50px; left: 24px">轮灌组信息</div>
          </div>
          <a-icon class="colse" type="close" @click="irrigationStatus = false" />
        </div>
        <div>
          <a-tabs>
            <a-tab-pane key="1" tab="灌溉组">
              <a-row style="padding: 0 18px">
                <a-empty v-show="groupList == ''" />
                <a-col
                  v-for="(item, index) in groupList"
                  :key="index"
                  :span="24"
                  @click="$router.push('/wfinfo/irrigation/IrrigationGroup')"
                  style="border-bottom: 1px solid #d2d2d4; padding-bottom: 10px; padding-top: 10px"
                >
                  <a-col :span="12">
                    <div class="irrigation-left">
                      <p>{{ item.irrigationName }}</p>
                      <a-progress :percent="parseInt(item.perCent)" status="active" />
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <p style="margin-bottom: 3px">灌溉开始时间：{{ item.startDate }}</p>
                    <p style="margin-bottom: 3px">灌溉结束时间：{{ item.endDate }}</p>
                    <p style="margin-bottom: 3px">灌溉时长：{{ item.ggsc }}小时</p>
                    <p style="margin-bottom: 3px">运行时长：{{ item.yxsc }}小时</p>
                  </a-col>
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="2" tab="灌溉记录">
              <a-empty v-show="irrigationRecordObj == ''" />
              <a-row style="padding: 0 18px">
                <a-col
                  v-for="(item, index) in irrigationRecordObj"
                  :key="index"
                  :span="24"
                  @click="$router.push('/wfinfo/irrigation/IrrigationRecords')"
                  style="border-bottom: 1px solid #d2d2d4; padding-bottom: 10px; padding-top: 10px"
                >
                  <a-col :span="12">
                    <div class="irrigation-left">
                      <p>{{ item.irrigationName }}</p>
                      <a-progress :percent="parseInt(item.perCent)" status="active" />
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <p style="margin-bottom: 3px">灌溉开始时间：{{ item.startDate }}</p>
                    <p style="margin-bottom: 3px">灌溉结束时间：{{ item.endDate }}</p>
                    <p style="margin-bottom: 3px">灌溉时长：{{ item.ggsc }}小时</p>
                    <p style="margin-bottom: 3px">运行时长：{{ item.yxsc }}小时</p>
                  </a-col>
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <div class="task" v-show="taskToggle">
        <div class="task-left">
          <a-tooltip>
            <a-progress
              :exception-percent="100"
              :percent="60"
              :success-percent="30"
              :width="100"
              type="circle"
              :stroke-color="{
                '0%': '#108ee9',
                '100%': '#87d068',
              }"
              :format="(percent) => `任务数量 `"
            />
          </a-tooltip>
          <div class="words">
            <p>
              未开始
              <span>{{ planStatesList.wksPlan }}</span>
            </p>
            <p>
              执行中
              <span>{{ planStatesList.jxzPlan }}</span>
            </p>
            <p>
              已完成
              <span>{{ planStatesList.wcPlan }}</span>
            </p>
          </div>
        </div>
        <div class="task-right">
          <a-progress
            type="circle"
            :percent="deviceStatesData.zxlDevice"
            :width="90"
            :format="(percent) => `设备在线率${deviceStatesData.zxlDevice}%`"
          />
          <a-progress
            type="circle"
            :percent="deviceStatesData.gzlDevice"
            :width="90"
            :format="(percent) => `故障率${deviceStatesData.gzlDevice}`"
          />
          <a-progress
            type="circle"
            :percent="deviceStatesData.xylDevice"
            :width="90"
            :format="(percent) => ` 响应率${deviceStatesData.xylDevice}`"
          />
        </div>
      </div>
      <div class="task-crice" @click="taskBtn">
        <a-icon type="left" style="color: #606b89" />
      </div>
      <div class="tuglie" v-show="tuglieStstus">
        <h3>图列</h3>
        <a-icon class="tuglie-close" @click="tuglieStstus = fase" type="close" />
        <div class="tuglie-list">
          <div class="tuglie-box">
            <img src="../../assets/img/sq.png" />
            墒情监测点
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/yw.png" />
            液位计
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/fm.png" />
            阀门（报警）
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/qx.png" />
            气象站
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/bf.png" />
            泵房
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/fmlx.png" />
            阀门（离线）
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/wg.png" />
            网关
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/xsc.png" />
            蓄水池
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/ggz.png" />
            阀门（灌溉中）
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/sp.png" />
            视频监测点
          </div>
          <div class="tuglie-box">
            <img src="../../assets/img/wgg.png" />
            阀门（未灌溉）
          </div>
        </div>
      </div>
      <div class="body">
        <div
          id="messageTag"
          style="
            visibility: hidden;
            width: 500px;
            height: 400px;
            position: absolute;
            color: #fff;
            z-index: 2;
            font-size: 16px;
          "
        >
          <div style="position: relative">
            <div style="position: absolute; left: 0px; top: 0px">
              <img src="static/building/message.png" alt="" style="width: 400px; opacity: 1" />
            </div>
            <div id="granaryName" style="position: absolute; left: 25px; top: 40px; font-size: 16px">流量计1</div>
            <div style="position: absolute; left: 290px; top: 25px">
              <img src="static/building/rain.png" alt="" style="width: 50px" />
            </div>

            <!-- <div style="position: absolute; left: 330px; top: 40px"><span id="temperature">19</span>℃</div> -->
            <div id="grain" style="position: absolute; left: 170px; top: 50px"><span id="grain">当前流量</span>(L)</div>
            <div
              style="position: absolute; left: 80px; top: 85px; font-size: 60px; color: #00ffff; vertical-align: middle"
            >
              <!-- <img id="grainImg" src="static/building/rain.png" alt="" style="width: 60px" /> -->
            </div>
            <div
              style="
                position: absolute;
                left: 155px;
                top: 80px;
                font-size: 60px;
                color: #00ffff;
                vertical-align: middle;
              "
            >
              <span id="weight">10</span>L
            </div>
            <div
              style="
                position: absolute;
                left: 130px;
                top: 170px;
                padding: 8px 25px;
                border-radius: 30px;
                border: 1px solid #00ffff;
              "
            >
              运行状态<span id="granaryHeight">正常</span>
            </div>
          </div>
        </div>
        <div id="container"></div>
      </div>
      <remoteMonitoring ref="remoteMonitoring"></remoteMonitoring>
    </a-spin>
  </div>
</template>

<script>
import remoteMonitoring from './remoteMonitoring'
import { mapActions } from 'vuex'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { abnormalLists, groupInfo, planStates, deviceStates, irrigationRecord } from '@/api/device'
import { CSS3DSprite, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
let camera = null
let scene = null
let renderer = null
let mesh = null
let model = null
let stop = null
let textureTree = null
let groups = null
let labelRenderer = null
let granaryArr = null
let labelRenderers = null
let chooseMesh = null
let mixer = null
export default {
  data() {
    return {
      spin: true,
      timer: null,
      irrigationStatus: false,
      monitorStatus: false,
      tuglieStstus: true,
      taskToggle: true,
      groupList: [],
      planStatesList: {},
      deviceStatesData: {},
      irrigationRecordObj: [],
      callThePoliceList: [],
      list: [],
    }
  },
  components: {
    remoteMonitoring,
  },
  mounted() {
    this.init()
    this.dataList()
    this.groupInfoList()
    this.planStatesData()
    this.deviceStatesList()
    this.irrigationRecordList()
    document.getElementsByTagName('body')[0].className = 'snow-container' //设置为新的
    // this.callThePoliceData()
    // this.deviceAllList()
    // this.timer = setInterval(this.get, 1000);
  },
  // 清除定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
    window.cancelAnimationFrame(this.stop) // 取消动画
  },
  methods: {
    ...mapActions(['Logout']),
    //退出登录
    handleLogout() {
      const that = this

      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          return that
            .Logout({})
            .then(() => {
              // update-begin author:wangshuai date:20200601 for: 退出登录跳转登录页面
              that.$router.push({ path: '/user/login' })
              // update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
              //window.location.reload()
            })
            .catch((err) => {
              that.$message.error({
                title: '错误',
                description: err.message,
              })
            })
        },
        onCancel() {},
      })
    },
    dataList() {
      abnormalLists()
        .then((res) => {
          console.log(res)
          this.callThePoliceList = res.result
        })
        .catch((err) => {})
    },
    init() {
      // 场景
      this.scene = new THREE.Scene()
      this.clock = new THREE.Clock()
      // 创建一个远景相机
      // -s * k, s * k, s, -s, 1, 1000定义了一个长方体渲染空间，渲染空间外的模型不会被渲染
      // this.camera = new THREE.PerspectiveCamera();
      // 渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      var width = window.innerWidth //窗口文档显示区的宽度
      var height = window.innerHeight //窗口文档显示区的高度
      /**
       * 相机设置
       */
      // var k = width / height; //Three.js输出的Cnavas画布宽高比
      // // var s = 200; //控制相机渲染空间左右上下渲染范围，s越大，相机渲染范围越大
      // var s = 2.3; //根据你想要渲染的粮仓范围设置相机渲染范围大小
      this.camera = new THREE.PerspectiveCamera(4, width / height, 1, 3000)

      // 是否显示阴影
      // this.renderer.shadowMapEnabled = true;
      // 设置渲染氛围颜色
      // this.renderer.setClearColor(new THREE.Color(0xffffff));
      // 鼠标拖拽
      this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement)
      this.orbitControls.maxPolarAngle = 1.5
      // this.renderer.setClearColor(0x005577, 1);
      this.renderer.outputEncoding = THREE.sRGBEncoding //解决加载gltf格式模型纹理贴图和原图不一样问题
      // 动画
      // 设置three.js背景颜色 和雾化颜色相配
      // this.renderer.setClearColor(0x000000, 1);
      this.animationMixer = new THREE.AnimationMixer(this.scene)
      this.renderer.setSize(width, height)
      // this.renderer.setClearAlpha(0.8);
      document.getElementById('container').appendChild(this.renderer.domElement)
      window.addEventListener('resize', () => this.render())
      this.camera.position.set(-19.65, 4.34,-19.60)
      this.camera.lookAt(0, 0, 0) //相机指向Three.js坐标系原点
      this.getGLB()
    },
    getGLB() {
      const loader = new GLTFLoader()
      const dracoLoader = new DRACOLoader()
      dracoLoader.setDecoderPath('/static/draco/')
      loader.setDRACOLoader(dracoLoader)
      loader.load('/static/building/zlss.gltf', (gltf) => {
        // console.log("控制台查看gltf对象结构", gltf);
        gltf.scene.traverse(function (object) {
          if (object.type === 'Mesh') {
            // 批量更改所有Mesh的材质
            object.material = new THREE.MeshLambertMaterial({
              map: object.material.map, //获取原来材质的颜色贴图属性值
              color: object.material.color, //读取原来材质的颜色
            })
          }
        })
        var group = gltf.scene.getObjectByName('电磁阀_6')
        var groupss = gltf.scene.getObjectByName('压流采集_3')
        this.granaryArr = groupss
        this.granaryArr = [] //所有粮仓模型对象的集合，export导出用于射线拾取
        // this.granaryArr.push(group);
        // console.log("212121", groupss);
        var that = this
        groupss.traverse(function (obj) {
          // console.log("22222", obj);
          if (obj.type === 'Mesh') {
            that.granaryArr.push(obj)
          }
        })
        this.spin = false
        // group.traverse(function (obj) {
        // console.log("2222", group);
        var label = that.tag(group.name) //把粮仓名称obj.name作为标签
        var pos = new THREE.Vector3()
        group.getWorldPosition(pos) //获取obj世界坐标、
        // console.log(pos);
        // 粮仓世界坐标对应粮仓底部圆心位置，如果标签像标注在粮仓底部，需要加上粮仓整体高度
        pos.y += 0.3 //加上粮仓顶部高度
        label.position.copy(pos) //标签标注在obj世界坐标
        // console.log("21212121212121", label);
        that.scene.add(label) //标签插入model组对象中
        that.CSS3DRenderers()
        that.CSS2DRenderers()
        that.KeyframeTrack()
        // });
        //  group.material.color.set(0xffffff);
        // console.log('group', group);
        groupss.children.forEach(function (mesh) {
          // console.log(mesh)
          if (mesh.material) {
            mesh.material.color.set(0xffffff)
          }
        })
        this.textureTree = new THREE.TextureLoader().load('static/building/rain.png')
        this.groups = new THREE.Group()
        for (let i = 0; i < 350; i++) {
          var spriteMaterial = new THREE.SpriteMaterial({
            map: this.textureTree, //设置精灵纹理贴图
          })
          // 创建精灵模型对象
          var sprite = new THREE.Sprite(spriteMaterial)
          this.groups.add(sprite)
          // 控制精灵大小,
          sprite.scale.set(0.04, 0.06, 1) //// 只需要设置x、y两个分量就可以
          var k1 = Math.random() - 0.5
          var k2 = Math.random() - 0.5
          // 设置精灵模型位置，在空间中随机分布
          sprite.position.set(30 * k1, 30 * Math.random(), 10 * k2)
          // 设置精灵模型位置，在空间中随机分布
        }
        this.scene.add(gltf.scene, this.groups)
        // this.scene.fog = new THREE.Fog(0x000000, 0, 200);
        /**
         * 光源设置
         */
        // 平行光1
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
        directionalLight.position.set(400, 200, 300)
        this.scene.add(directionalLight)
        // 平行光2
        var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5)
        directionalLight2.position.set(-400, -200, -300)
        this.scene.add(directionalLight2)
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 0.4)
        this.scene.add(ambient)
      })
      // var loaders = new THREE.GLTFLoader(); //创建一个加载器
      this.render()
      this.chooseMeshss()
    },
    chooseMeshss() {
      var messageTag = this.tags('messageTag') //创建粮仓标注的标签
      this.scene.add(messageTag)
      // 内容需要改变的HTML元素对应的id
      var idArr = ['granaryName', 'temperature', 'grain', 'grainImg', 'weight', 'granaryHeight', 'grainHeight']
      var that = this
      // click mousemove
      addEventListener('click', function (event) {
        if (that.chooseMesh) {
          messageTag.element.style.visibility = 'hidden' //隐藏标签
        }
        that.chooseMeshs(event, messageTag) //执行射线拾取的代码

        // 选中不同粮仓，HTML标签信息跟着改变
        if (that.chooseMesh) {
          //批量更新粮仓chooseMesh的标签信息
          idArr.forEach(function (id) {
            var dom = document.getElementById(id)
            // console.log("1111111111", messageTag);
          })

          messageTag.element.style.visibility = 'visible' //显示标签
          // console.log('gao', messageTag.position.copy(that.chooseMesh.point))
          // messageTag.position.copy(that.chooseMesh.getWorldPosition());//通过粮仓世界坐标设置标签位置
          messageTag.position.copy(that.chooseMesh.point) //射线在粮仓表面拾取坐标
        }
      })
    },
    chooseMeshs(event, messageTag) {
      // console.log("event,messageTag", event, messageTag);
      var that = this
      choose(event, messageTag)
      function choose(event, messageTag) {
        if (that.chooseMesh) {
          that.chooseMesh.material.color.set(0xffffff) // 把上次选中的mesh设置为原来的颜色
        }
        var Sx = event.clientX //鼠标单击位置横坐标
        var Sy = event.clientY //鼠标单击位置纵坐标
        //屏幕坐标转WebGL标准设备坐标
        var x = (Sx / window.innerWidth) * 2 - 1 //WebGL标准设备横坐标
        var y = -(Sy / window.innerHeight) * 2 + 1 //WebGL标准设备纵坐标
        //创建一个射线投射器`Raycaster`
        var raycaster = new THREE.Raycaster()
        // console.log('raycaster',raycaster)
        // console.log("this.camera", that.camera);
        // console.log("222222", that.granaryArr);
        //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
        raycaster.setFromCamera(new THREE.Vector2(x, y), that.camera)
        //返回.intersectObjects()参数中射线选中的网格模型对象
        // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
        var intersects = raycaster.intersectObjects(that.granaryArr)
        // console.log('射线器返回的对象', intersects)
        // console.log("射线投射器返回的对象 点point", intersects[0].point);
        // console.log(
        //   "射线投射器的对象 几何体",
        //   intersects[0].object.geometry.vertices
        // );
        // intersects.length大于0说明，说明选中了模型
        if (intersects.length > 0) {
          that.chooseMesh = intersects[0].object
          that.chooseMesh.material.color.set(0x000000) //选中改变颜色，这样材质颜色贴图.map和color颜色会相乘
          that.chooseMesh.point = intersects[0].point
        } else {
          that.chooseMesh = null
        }
      }

      // addEventListener("click", choose); // 监听窗口鼠标单击事件,鼠标单击选中某个国家Mesh
    },
    tag(domID) {
      // 创建div元素(作为标签)
      var div = document.createElement('div')
      div.innerHTML = domID
      div.classList.add('tag')

      //div元素包装为CSS3模型对象CSS3DSprite
      var label = new CSS3DSprite(div)
      div.style.pointerEvents = 'none' //避免HTML标签遮挡三维场景的鼠标事件
      // 设置HTML元素标签在three.js世界坐标中位置
      // label.position.set(x, y, z);
      //缩放CSS3DSprite模型对象
      label.scale.set(0.0025, 0.0025, 0.0025) //根据相机渲染范围控制HTML 3D标签尺寸
      label.rotateY(Math.PI / 2) //控制HTML标签CSS3对象姿态角度
      // label.rotateX(-Math.PI/2);
      return label //返回CSS3模型标签
    },
    CSS3DRenderers() {
      // 创建一个CSS3渲染器CSS3DRenderer
      this.labelRenderer = new CSS3DRenderer()
      this.labelRenderer.setSize(window.innerWidth, window.innerHeight)
      this.labelRenderer.domElement.style.position = 'absolute'
      // 相对标签原位置位置偏移大小
      this.labelRenderer.domElement.style.top = '0px'
      this.labelRenderer.domElement.style.left = '0px'
      // //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
      this.labelRenderer.domElement.style.pointerEvents = 'none'
      document.getElementById('container').appendChild(this.labelRenderer.domElement)
      // document.body.appendChild(this.labelRenderer.domElement);
    },
    tags(domID) {
      var dom = document.getElementById(domID)
      //dom元素包装为CSS2模型对象CSS2DObject
      var label = new CSS2DObject(dom)
      dom.style.pointerEvents = 'none' //避免HTML标签遮挡三维场景的鼠标事件
      // 设置HTML元素标签在three.js世界坐标中位置
      // label.position.set(x, y, z);
      return label //返回CSS2模型标签
    },
    CSS2DRenderers() {
      // 创建一个CSS3渲染器CSS3DRenderer
      this.labelRenderers = new CSS2DRenderer()
      this.labelRenderers.setSize(window.innerWidth, window.innerHeight)
      this.labelRenderers.domElement.style.position = 'absolute'
      // 相对标签原位置位置偏移大小
      this.labelRenderers.domElement.style.top = '200px' //信息弹窗界面高度一半
      this.labelRenderers.domElement.style.left = '250px' //信息弹窗界面宽度一半
      // //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
      this.labelRenderers.domElement.style.pointerEvents = 'none'
      document.getElementById('container').appendChild(this.labelRenderers.domElement)
    },
    KeyframeTrack() {},
    render() {
      // 更新动画
      this.stop = requestAnimationFrame(() => {
        this.render()
      })
      // 两次渲染时间间隔
      // var t = this.clock.getDelta();
      if (this.mixer != undefined) {
        this.mixer.update(this.clock.getDelta())
      }
      var t = this.clock.getDelta();
      // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
      // 每次渲染都会更新雨滴的位置，进而产生动画效果
      if (this.groups != undefined) {
        // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
        // 每次渲染都会更新雨滴的位置，进而产生动画效果
        this.groups.children.forEach((sprite) => {
          // console.log(sprite)
          // 雨滴的y坐标每次减2
            sprite.position.y -= 2 * t;
          if (sprite.position.y < 0) {
            // 如果雨滴落到地面，重置y，从新下落
            sprite.position.y = 10
          }
        })
      }
      this.animationMixer.update(this.clock.getDelta())
      this.orbitControls.update()
      if (this.labelRenderer != undefined) {
        this.labelRenderer.render(this.scene, this.camera) //渲染HTML标签对象
      }
      if (this.labelRenderers != undefined) {
        this.labelRenderers.render(this.scene, this.camera) //渲染HTML标签对象
      }
      this.renderer.render(this.scene, this.camera)
      this.scene.rotateY(0.00009) //立方体绕y轴旋转动画
      // console.log(this.camera.position) //通过相机控件OrbitControls旋转相机，选择一个合适场景渲染角度
    },
    onMapComplete(map) {
      map.setFitView()
    },
    // 轮灌信息展示
    irrigationBtn() {
      this.irrigationStatus = true
    },
    // 调用子组件数据
    monitoring() {
      this.$refs.remoteMonitoring.modal2Visible = true
      this.$refs.remoteMonitoring.dataList()
    },
    // 控制任务数量展示隐藏
    taskBtn() {
      this.taskToggle = !this.taskToggle
    },
    // 灌溉一张图-灌溉组信息
    groupInfoList() {
      groupInfo()
        .then((res) => {
          console.log(res)
          this.groupList = res.result
        })
        .catch((err) => {})
    },
    // // 任务数量接口
    planStatesData() {
      planStates()
        .then((res) => {
          this.planStatesList = res.result
        })
        .catch((err) => {})
    },
    // 故障率接口数据
    deviceStatesList() {
      deviceStates()
        .then((res) => {
          this.deviceStatesData = res.result
        })
        .catch((err) => {})
    },
    // 灌溉记录
    irrigationRecordList() {
      irrigationRecord()
        .then((res) => {
          this.irrigationRecordObj = res.result
        })
        .catch((err) => {})
    },
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 68px;
  z-index: 99;
  background: #2049c5;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  box-shadow: 0px 0px 10px 0px rgba(1, 84, 255, 0.5);
}

li {
  list-style: none;
}

h1 {
  margin: 0;
  color: #fff;
}

.header-logo {
  height: 100%;
  display: flex;
  align-items: center;
}

/deep/ .amap-icon img {
  /*width: 16px;*/
}

.nav ul {
  display: flex;
  height: 100%;
  align-items: center;
  margin: 0;
}

.layouts {
  display: flex;
  height: 68px;
  align-items: center;
  color: #ffffff;
}

.nav ul li {
  width: 120px;
  text-align: center;
}

.nav ul li a {
  color: #ffffff;
}

.contact {
  width: 100%;
  height: 100vh;
}

.map {
  width: 100%;
  height: 100%;
}

.rotation {
  position: fixed;
  top: 100px;
  z-index: 100;
  width: 150px;
  opacity: 0.8;
  left: -92px;
  height: 60px;
  background: #2a55ce;
  border-radius: 0px 35px 35px 0px;
  display: flex;
  line-height: 60px;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.rotation:hover {
  left: 0;
  transition: all 0.3s;
}

.rotation img {
  width: 27px;
  height: 35px;
}

.rotation p {
  margin: 0 15px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}

.monitor p {
  margin: 0 10px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}

.monitor {
  position: fixed;
  top: 190px;
  left: -92px;
  z-index: 100;
  opacity: 0.8;
  width: 150px;
  height: 60px;
  text-align: center;
  background: #2a55ce;
  border-radius: 0px 35px 35px 0px;
  cursor: pointer;
  display: flex;
  line-height: 60px;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.monitor:hover {
  left: 0;
  transition: all 0.3s;
}

.monitor img {
  width: 30px;
  height: 30px;
}

.police {
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 100;
  width: 66px;
  height: 60px;
  cursor: pointer;
}

.police-box {
  position: fixed;
  top: 180px;
  right: 30px;
  z-index: 100;
  width: 550px;
  height: 352px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(24, 58, 164, 0.18);
  border-radius: 4px;
  cursor: pointer;
}

.police-top {
  position: relative;
  width: 100%;
  display: flex;
  height: 43px;
  background: #5c7be6;
  background-image: linear-gradient(141deg, rgba(24, 58, 164, 0.1) 0%, #ffffff 75%);
  border-radius: 3px 3px 0px 0px;
}

.top-tips {
  height: 0;
  width: 149px;
  border-top: 49px solid #3865e5;
  border-right: 37px solid transparent;
  color: #fff;
  text-align: center;
  line-height: 49px;
  font-size: 16px;
  position: relative;
}

.colse {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #c3c1c1;
  font-size: 18px;
}

.irrigation-box {
  position: fixed;
  top: 180px;
  left: 35%;
  z-index: 100;
  /* margin-left: -225px; */
  width: 550px;
  height: 500px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(24, 58, 164, 0.18);
  border-radius: 4px;
  cursor: pointer;
}

.irrigation-left {
  width: 90%;
  height: 86px;
  text-align: center;
  background: #e0e0e0;
  padding: 15px 10px 0;
  box-sizing: border-box;
}

.irrigation-left p {
  margin-bottom: 10px;
}

.task {
  display: flex;
  width: 650px;
  height: 131px;
  position: absolute;
  bottom: 10px;
  left: 20px;
  z-index: 99;
}

.task-crice {
  cursor: pointer;
  width: 18px;
  height: 26px;
  line-height: 26px;
  background: #ffffff;
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.28);
  opacity: 0.8;
  border-radius: 0px 13px 13px 0px;
  bottom: 55px;
  left: 0px;
  z-index: 9999;
  position: absolute;
}

.task-left {
  width: 384px;
  height: 131px;
  background: #fff;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}

.task-right {
  margin-left: 10px;
  width: 384px;
  height: 131px;
  background: #fff;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.words p span {
  margin-left: 15px;
}

.words p {
  margin: 5px 0;
}

.tuglie {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 454px;
  height: 205px;
  background: #ffffff;
  border-radius: 3px;
  z-index: 99;
  padding: 10px;
  box-sizing: border-box;
}

.tuglie h3 {
  text-align: center;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #4171f3;
}

.tuglie-close {
  position: relative;
  top: -40px;
  right: -425px;
  color: #c3c1c1;
}

.tuglie-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: -15px;
}

.tuglie-box {
  width: 32%;
  height: 33px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #5b6680;
  display: flex;
  align-items: center;
}

.tuglie-box img {
  width: 20px;
  margin-right: 5px;
}

.active {
  width: 120px;
  height: 38px;
  display: inline-block;
  background: #376bf9;
  border-radius: 20px;
  line-height: 38px;
  text-align: center;
}

/deep/ .BMap_noprint {
  display: none !important;
}

/deep/ .anchorBL {
  display: none !important;
}

/deep/ .ant-card-body {
  padding: 5px;
}
</style>

<style>
.className {
  -webkit-animation: twinkling 2s infinite ease-in-out;
}
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes twinkling {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes twinkling {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/deep/ .amap-logo {
  display: none !important;
}

.amap-copyright,
.amap-logo {
  display: none !important;
}

.amap-marker-label {
  border: none !important;
  background-color: initial;
  color: #000;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url(../../../public/static/building/posx.jpg) top no-repeat;
  background-size: 100%;
}

#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.ant-spin-spinning {
  max-height: 100vh !important;
}
</style>
<style>
.snow-container {
  overflow: hidden;
}
.tag {
  box-shadow: 0 0 2px #00ffff inset;
  background: linear-gradient(#00ffff, #00ffff) left top, linear-gradient(#00ffff, #00ffff) left top,
    linear-gradient(#00ffff, #00ffff) right bottom, linear-gradient(#00ffff, #00ffff) right bottom;
  background-repeat: no-repeat;
  background-size: 1px 6px, 6px 1px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: 16px;
  padding: 4px 10px;
}
</style>
